@import 'themes';
@import 'repl-common';
@import 'repl-output';
@import 'repl-source-file';

@mixin replConsoleEnvironment($theme) {
  .repl-console-environment {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
  }
  .repl-console-environment-head {
    @include notSelectable();
    width: 100%;
    height: 30px;
    min-height: 30px;
    border-bottom: 1px solid if($theme == $dark-theme, $dark-app-console-message-filter-border-color, $lt-app-console-message-filter-border-color);
    font-weight: 900;
    font-size: 110%;
    display: flex;
    align-self: center;

    .repl-console-environment-title {
      text-align: center;
      align-self: center;
    }
  }
  .repl-console-environment-body {
    flex: 1;
    overflow: auto;
    padding-right: 10px;
    .repl-console-environment-body-header {
      @include notSelectable();
      font-weight: 900;
      display: flex;
      width: 100%;
      height: 30px;
      padding: 0px 5px;
      margin-bottom: 10px;
      background-color: if($theme == $dark-theme, $dark-app-console-env-data-heading-color, $lt-app-console-env-data-heading-color);
      .repl-console-environment-listing-title {
        align-self: center;
      }
    }

    .repl-console-environment-listing {
      @include replOutput($theme);
      margin: 0 5px;
      .env-entry {
        display: flex;
        padding: 5px 0px;
        .env-key, .env-value {
          flex: 1;
        }
      }
    }

    .repl-console-environment-no-data {
      @include notSelectable();
      margin-bottom: 10px;
      text-align: center;
      color: if($theme == $dark-theme, $dark-app-console-env-no-data-color, $lt-app-console-env-no-data-color);
    }
  }

}
